//Vue数据劫持代理

//模拟数Vue中data选项
let data={
    username:'Tom',
    age:33
}

//模拟组件的实例
let _this={
}

//错误写法，如果修改this的值，不能监视到属性的变化
// _this.username=data.username;

//利用Object.deffineProperty()
for (const item in data) {
    Object.defineProperty(_this,item,{
        //get：用来获取属性值，当获取该属性值会调用get方法
        get(){
            console.log('get()');
            return  data[item]
        },
        //set:监视扩展属性的，只要一经修改就调用
        set(newValue){
            console.log('set()',newValue);
            // _this.username=newValue; // 千万不要在set方法修改当前扩展属性的值，会出现死循环，没有结束条件
            data[item]=newValue;
        }
    })
}
//通过Object.defineProperty()方法添加的扩展属性不能直接通过对象.属性修改，这是它的特性，但是可以触发它的set方法，在set方法中可以进行修改
_this.username='curry';
console.log(_this);
console.log(_this.username);